<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量变化</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
  </body>

  <script>
    /** 二次输出都是3
    let a =1;
    let b =2;
    let sum = a+b;
    console.log(sum);
    a=3;
    b=4;
    console.log(sum);
        **/

    /**  JavaScript中，可以用Proxy对原对象进行包装，从而实现对对象属性设置和获取的监听 
    let a = {
        value:1
    };
    let b = {
        value:2
    }
    handleA = {
        get(target,prop){
            console.log(`获取A:${prop}的值`)
            return target[prop];
        },
        set(target,key,value){
            console.log(`设置A:${key}的值${value}`)
        }
    }
    handleB = {
        get(target,prop){
            console.log(`获取B:${prop}的值`)
            return target[prop];
        },
        set(target,key,value){
            console.log(`设置B:${key}的值${value}`)
        }
    }

    let pa = new Proxy(a, handleA)
    let pb = new Proxy(b, handleB)
    let sum = pa.value + pb.value

    pa.value =3
    pb.value =4
     ***/
    let a ={
        value:1
    }
    let b ={
        value:2
    }
    let trigger = null

    handleA = {
        set(target, key, value){
            target[key] = value
            if(trigger){
                trigger()
            }
        }
    }
    handleB = {
        set(target, key, value){
            target[key] = value
            if(trigger){
                trigger()
            }
        }
    }
    let pa = new Proxy(a, handleA)
    let pb = new Proxy(b, handleB)
    let sum = 0

    trigger = () =>{
        sum = pa.value + pb.value
    }
    trigger()

    console.log(sum)
    pa.value =3
    console.log(sum)
    pb.value =4
    console.log(sum)
  </script>

</html>